import type { StoreInfo } from "@/Interface/StoreInfoInterface";
import style from "./style.module.scss";
import { useCmpDataStore } from "@/stores/cmpDataStore";
import { useBasicDataStore } from "@/stores/basicDataStore";
import { useState } from "react";
import { Select } from "antd";

type PromotionKey = 'springFestival' | 'laborDay' | 'nationalDay' | 'summer';

const CmpPromotionList: React.FC = () => {
  const basicData = useBasicDataStore(state => state.basicData) as StoreInfo;
  const cmpData = useCmpDataStore(state => state.cmpData) as StoreInfo;
  const [selectedPromotion, setSelectedPromotion] = useState<PromotionKey>('springFestival');

  // 节假日选项配置
  const promotionOptions = [
    { value: "springFestival", label: "春节" },
    { value: "laborDay", label: "劳动节" },
    { value: "nationalDay", label: "国庆节" },
    { value: "summer", label: "暑期" }
  ];

  // 指标配置（数据与显示分离）
  const metricsConfig = [
    {
      label: "日均订单量",
      type: "integer",
      getValue: (data: StoreInfo) => data.annualData.promotions[selectedPromotion].orderCount,
      format: (val: number) => val.toLocaleString(),
      diff: (current: number, compare: number) => current - compare
    },
    {
      label: "日均客流量",
      type: "integer",
      getValue: (data: StoreInfo) => data.annualData.promotions[selectedPromotion].customerFlow,
      format: (val: number) => val.toLocaleString(),
      diff: (current: number, compare: number) => current - compare
    },
    {
      label: "营收增长",
      type: "percentage",
      getValue: (data: StoreInfo) => parseFloat(data.annualData.promotions[selectedPromotion].revenueGrowth),
      format: (val: number) => `${val.toFixed(1)}%`,
      diff: (current: number, compare: number) => current - compare
    },
    {
      label: "ROI",
      type: "float",
      getValue: (data: StoreInfo) => parseFloat(data.annualData.promotions[selectedPromotion].roi),
      format: (val: number) => val.toFixed(2),
      diff: (current: number, compare: number) => current - compare
    },
    {
      label: "新客占比",
      type: "percentage",
      getValue: (data: StoreInfo) => parseFloat(data.annualData.promotions[selectedPromotion].newCustomerRatio),
      format: (val: number) => `${val.toFixed(1)}%`,
      diff: (current: number, compare: number) => current - compare
    }
  ];

  return (
    <div className={style.promotionList}>
      <div className={style.header}>
        <h4>节假日促销对比分析</h4>
        <div className={style.box}>
          <Select
            className={style.select}
            value={selectedPromotion}
            onChange={(target) => setSelectedPromotion(target as PromotionKey)}
          >
            {promotionOptions.map(option => (
              <Select.Option key={option.value} value={option.value}>
                {option.label}
              </Select.Option>
            ))}
          </Select>
        </div>
      </div>

      <table>
        <thead>
          <tr>
            <th>{promotionOptions.find(opt => opt.value === selectedPromotion)!.label}</th>
            <th>当前门店</th>
            <th>对比门店</th>
            <th>差异值</th>
          </tr>
        </thead>
        <tbody>
          {metricsConfig.map((metric, index) => {
            // 获取原始数值
            const numBasic = metric.getValue(basicData);
            const numCmp = metric.getValue(cmpData);
            const difference = metric.diff(numBasic, numCmp);
            const isEqual = difference === 0;
            const isPositive = difference > 0;

            // 格式化显示值
            const formattedBasic = metric.format(numBasic);
            const formattedCmp = metric.format(numCmp);

            // 差异值格式化
            let formattedDiff = '';
            let unit = '';

            switch (metric.type) {
              case 'integer':
                formattedDiff = Math.abs(difference).toLocaleString();
                break;
              case 'percentage':
                formattedDiff = Math.abs(difference).toFixed(1);
                unit = 'pp';
                break;
              case 'float':
                formattedDiff = Math.abs(difference).toFixed(2);
                break;
            }

            const displaySymbol = isEqual ? '' : (difference > 0 ? '+' : '-');
            const displayValue = isEqual ? '-' : `${displaySymbol}${formattedDiff}${unit}`;
            const arrow = isEqual ? '' : (isPositive ? ' ↑' : ' ↓');

            return (
              <tr key={index}>
                <td>{metric.label}</td>
                <td>{formattedBasic}</td>
                <td>{formattedCmp}</td>
                <td>
                  <span
                    className={isEqual ? style.neutral : (isPositive ? style.positive : style.negative)}
                    title={isEqual ? '指标相同' : `差异值：${displayValue}`}
                  >
                    {displayValue}
                    {arrow}
                  </span>
                </td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
};

export default CmpPromotionList;